$(function () {
    var list1 = document.querySelector("#slide2 .swiper-wrapper");
    $.ajax({
        url: "../static/json/data.json",
        datatype: "json",
        success: function (res) {
            // console.log(res);
            render(res);
            initSwiper();
        }
    })
    function render(res) {


        var html = '';
        for (var i = 0; i < res.length; i++) {
            html += `
            <div class="swiper-slide">

                <div class="swiper-slide-nav">
                    <img src=${res[i].img} alt="">
                        <br>
                            <p>${res[i].p}</p>
                            <p>${res[i].p1}</p>
                            <p>${res[i].p2}</p>
                            <select name="" id="">
                                <option value="">${res[i].option1}</option>
                                <option value="">${res[i].option2}</option>
                                <option value="">${res[i].option3}</option>
                            </select><br>
                 <button>${res[i].button}</button>
                </div>
            </div>

            `
        }

        list1.innerHTML = html
        // console.log(list1);
    }
    function initSwiper() {
        var swiper_main = new Swiper('#slide2', {
            loop: true,
            autoplay: true,
            slidesPerView: 3,
            spaceBetween: 30,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
            },
        })
    }

})